<template>
	<view class="customer-service-modal" v-if="visible" @click="handleMaskClick">
		<view class="modal-content" @click.stop>
			<view class="modal-header">
				<text class="modal-title">{{ title }}</text>
				<view class="close-btn" @click="handleClose">
					<text class="iconfont icon-close"></text>
				</view>
			</view>
			<view class="modal-body">
				<view class="service-options">
					<view class="service-option" @click="handlePhoneCall">
						<!-- <view class="option-icon phone">
							<text class="iconfont icon-phone"></text>
						</view> -->
						<view class="option-content">
							<text class="option-title">{{ phoneTitle }}</text>
							<text class="option-desc">{{ phoneNumber }}</text>
						</view>
						<view class="option-arrow">
							<text class="iconfont icon-right"></text>
						</view>
					</view>
					<view class="service-option" @click="handleOnlineService">
						<!-- <view class="option-icon chat">
							<text class="iconfont icon-chat"></text>
						</view> -->
						<view class="option-content">
							<text class="option-title">{{ onlineTitle }}</text>
							<text class="option-desc">{{ onlineDesc }}</text>
						</view>
						<view class="option-arrow">
							<text class="iconfont icon-right"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'JCustomerService',
	props: {
		// 是否显示弹框
		visible: {
			type: Boolean,
			default: false
		},
		// 弹框标题
		title: {
			type: String,
			default: '联系客服'
		},
		// 客服电话号码
		phoneNumber: {
			type: String,
			default: '400-123-4567'
		},
		// 电话客服标题
		phoneTitle: {
			type: String,
			default: '电话客服'
		},
		// 在线客服标题
		onlineTitle: {
			type: String,
			default: '在线客服'
		},
		// 在线客服描述
		onlineDesc: {
			type: String,
			default: '小程序客服聊天'
		},
		// 是否点击遮罩关闭
		maskClosable: {
			type: Boolean,
			default: true
		},
		// 小程序客服配置
		customerServiceConfig: {
			type: Object,
			default: () => ({
				corpId: '',
				url: ''
			})
		}
	},
	methods: {
		// 处理遮罩点击
		handleMaskClick() {
			if (this.maskClosable) {
				this.handleClose();
			}
		},

		// 关闭弹框
		handleClose() {
			this.$emit('close');
		},

		// 拨打客服电话
		handlePhoneCall() {
			uni.makePhoneCall({
				phoneNumber: this.phoneNumber,
				success: () => {
					console.log('拨打电话成功');
				},
				fail: (err) => {
					console.error('拨打电话失败:', err);
					uni.showToast({
						title: '拨打电话失败',
						icon: 'none'
					});
				}
			});
		},

		// 打开在线客服
		handleOnlineService() {
			// 如果配置了小程序客服
			if (this.customerServiceConfig.corpId && this.customerServiceConfig.url) {
				uni.openCustomerServiceChat({
					corpId: this.customerServiceConfig.corpId,
					url: this.customerServiceConfig.url,
					success: () => {
						console.log('打开客服聊天成功');
						this.handleClose();
					},
					fail: (err) => {
						console.error('打开客服聊天失败:', err);
						// 如果小程序客服不可用，跳转到备用客服页面
						this.goToFallbackService();
					}
				});
			} else {
				// 如果没有配置小程序客服，跳转到备用客服页面
				this.goToFallbackService();
			}
		},

		// 跳转到备用客服页面
		goToFallbackService() {
			uni.navigateTo({
				url: '/pages/customer-service/customer-service',
				fail: () => {
					uni.showToast({
						title: '客服功能暂不可用',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
// 联系客服弹框
.customer-service-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	animation: fadeIn 0.3s ease;

	.modal-content {
		background-color: #fff;
		border-radius: 20rpx;
		width: 600rpx;
		max-width: 90%;
		animation: slideUp 0.3s ease;

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 30rpx 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.modal-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}

			.close-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 30rpx;
				background-color: #f8f9fa;
				transition: all 0.3s ease;

				&:active {
					background-color: #e9ecef;
					transform: scale(0.95);
				}

				.iconfont {
					font-size: 28rpx;
					color: #666;
				}
			}
		}

		.modal-body {
			padding: 30rpx;

			.service-options {
				.service-option {
					display: flex;
					align-items: center;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #f5f5f5;
					transition: all 0.3s ease;

					&:last-child {
						border-bottom: none;
					}

					&:active {
						background-color: #f8f9fa;
						transform: scale(0.98);
					}

					.option-icon {
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 24rpx;

						&.phone {
							background-color: #246ef9;
						}

						&.chat {
							background-color: #4caf50;
						}

						.iconfont {
							font-size: 32rpx;
							color: #fff;
						}
					}

					.option-content {
						flex: 1;
						display: flex;
						flex-direction: column;
						gap: 8rpx;

						.option-title {
							font-size: 30rpx;
							font-weight: 500;
							color: #333;
						}

						.option-desc {
							font-size: 26rpx;
							color: #666;
						}
					}

					.option-arrow {
						.iconfont {
							font-size: 24rpx;
							color: #ccc;
						}
					}
				}
			}
		}
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
</style>
